import { ElMessage } from 'element-plus'
import { baMenDataApi } from '@/api/culture/culture-api.js' // 文化API接口

export default {
  el: 'app',
  data() {
    return {
      // 导航
      navigations: [
        {
          id: 1,
          title: '首页', // 名称
          link: '/', // 路由
          icon: 'ios-home' // 图标
        },
        {
          id: 2,
          title: '文化探索', // 名称
          link: '/culture', // 路由
          icon: 'logo-buffer' // 图标
        },
        {
          id: 3,
          title: '八门', // 名称
          link: '', // 路由
          icon: 'md-pin' // 图标
        }
      ],
      // 更多
      mores: [
        { title: '阴阳', link: '/culture/yy' },
        { title: '五行', link: '/culture/wx' },
        { title: '天干', link: '/culture/tg' },
        { title: '地支', link: '/culture/dz' },
        { title: '八卦', link: '/culture/bg' },
        { title: '六十四卦', link: '/culture/lssg' },
        { title: '九星', link: '/culture/jx' },
        { title: '八神', link: '/culture/bs' },
        { title: '生肖', link: '/culture/sx' },
        { title: '奇门常用吉格', link: '/culture/qmjg' },
        { title: '奇门常用凶格', link: '/culture/qmxg' }
      ],
      pageTable: 0, // 显示界面（0:基本介绍。1:详细解读）

      /* 数据 */
      data: [], // 数据
      dataTotal: 0, // 数据条数
      /* 查询条件 */
      page: 1, // 页数
      pageSize: 10, // 每页条数
      queryData: '', // 查询条件
      timeout: null
    }
  },
  watch: {
    queryData(val) {
      this.pageData(); // 分页查询
    }
  },
  created() {
    this.pageData(); // 分页查询
  },
  mounted() {
  },
  methods: {

    /**
     * 分页查询
     */
    pageData() {
      // 构造条件
      let query = {
        page: this.page, // 页数
        pageSize: this.pageSize, // 每页条数
        queryData: this.queryData // 查询条件
      }
      // 发送请求
      baMenDataApi(query).then((res) => {
        if (String(res.data.code) == '200' && null != res.data.data) {
          this.data = res.data.data.records // 数据
          this.dataTotal = res.data.data.total // 数据总条数
        }
      })
    },

    pageData2() {
      // this.pageData(); // 分页查询
    },
    
    /**
     * 查询数据高亮
     * 
     * @param {string} val 所要查询的数据
     */
    showDataMethod(val) {
      val = val + ''
      if (val.indexOf(this.queryData) != -1 && this.queryData != '') {
        return val.replace(this.queryData, '<font color="#409EFF">' + this.queryData + '</font>')
      } else {
        return val
      }
    },

    /**
     * 搜索框自动补全
     * 
     * @param {string} queryString 
     * @param {*} cb 
     */
    querySearch(queryString, cb) {
      var data = this.data;
      var results = queryString ? data.filter(this.createStateFilter(queryString)) : data;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 240);
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1); // 可以模糊查询
      };
    },
    /**
     * 搜索框远程搜索数据高亮
     */
    brightenKeyword(val, keyword) {
      const Reg = new RegExp(keyword, 'i');
      if (val) {
        return val.replace(Reg, `<b style="color: #409EFF;">${keyword}</b>`);
      }
    },
    
    /**
     * 翻页
     */
    handleSizeChange(val) {
      this.pageSize = val; // 设置每页条数
      this.pageData(); // 分页查询
    },
    handleCurrentChange(val) {
      this.page = val; // 设置页数
      this.pageData(); // 分页查询
    },

    /**
     * 消息提示
     * 
     * @param {number} duration 显示时间（单位：毫秒）
     * @param {boolean} showClose 是否可关闭（true:是。false:否）
     * @param {string} type 消息类型（success、warning、error）
     * @param {string} message 提示内容
     */
    elMessage(duration, showClose, type, message) {
      ElMessage({
        duration: duration,
        showClose: showClose,
        type: type,
        message: message,
        plain: true
      })
    }

  }
}
